<template>
  <div>
    供应商名称：<el-input v-model="query.supplierName"  placeholder="请输入名字" style="width: 200px"></el-input>


    <el-button type="primary" @click="initAll"  plain>查询</el-button>
    <el-button type="primary" @click="iniData"  plain>重置</el-button>
    <el-button type="primary" @click="add" style="text-align: right" plain>添加供应商</el-button>
    <el-dialog :title="mode.title" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="form.supplierName" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="mid">
          <el-input v-model="form.mid" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone"  style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" >
          <el-input v-model="form.address" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="form.email"  style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.miaoshu"  style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="dialogFormVisible2" width="600px">
      <b>供应商编码:</b><b style="color: burlywood">{{supplier.supplierCoding}}</b><br>
      <b>供应商名称:</b><b style="color: burlywood">{{supplier.supplierName}}</b><br>
      <b>联系人:</b><b style="color: burlywood">{{supplier.uname}}</b><br>
      <b>联系电话:</b><b style="color: burlywood">{{supplier.phone}}</b><br>
      <b>传真:</b><b style="color: burlywood">{{supplier.mailbox}}</b><br>
      <b>描述:</b><b style="color: burlywood">{{supplier.email}}</b><br><br>

      <el-button type="primary" @click="dialogFormVisible2=false">返回</el-button>
    </el-dialog>

    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        prop="supplierCoding"
        label="供应商编码">
      </el-table-column>
      <el-table-column
        prop="supplierName"
        label="供应商名称">
      </el-table-column>
      <el-table-column
        prop="uname"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话">
      </el-table-column>
      <el-table-column
        prop="mailbox"
        label="传真">
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.addTime |format('yyyy-MM-dd hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger" icon="el-icon-chat-line-square" circle
            @click="Info(scope.row)">
          </el-button>
          <el-button
            type="primary" icon="el-icon-edit" circle
            @click="handleEdit(scope.row)">
          </el-button>
          <el-button
            @click="handleDelete(scope.row.id)" type="danger" icon="el-icon-close" circle>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="text-align:right;"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="query.pageNum"
                   :page-sizes="[3, 4, 6, 400]"
                   :page-size="query.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{},
      supplier:{},
      tableData: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 3,
        supplierName: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2:false,
      form: {
        id:"",
        supplierCoding:"",
        supplierName:"",
        mailbox:"",
        addTime:"",
        updateTime:"",
        mid:"",
        phone:"",
        uname:"",
        email:"",
        miaoshu:"",
        address:"",
      },
      formLabelWidth: '120px',
      mode: {
        title: "",
        url: "",
      },
      rules: {
        supplierName: [
          {required: true, message: '请输入供应商姓名', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入联系电话', trigger: 'blur'}
        ],
        mid: [
          {required: true, message: '请输入数字，因为这是外键', trigger: 'blur'}
        ],
      }
    }
  },
  filters: {
    format(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value, arg);

    }
  },
  methods: {
    Info(r){
      if (this.user.rid!=1){
        this.$message.error("你没有权限进行操作!")
      }else {
        this.dialogFormVisible2=true;
        this.supplier=r;
      }

    },

    handleEdit(e) {
      if (this.user.rid!=1){
        this.$message.error("你没有权限进行操作!")
      }else {
        this.form = e;
        this.dialogFormVisible = true;
        this.mode = {
          title: "修改",
          url: '/supplier/handEdit'
        }
      }

    },
    add() {
      if (this.user.rid!=1){
        this.$message.error("你没有权限进行操作!")
      }else {
        this.dialogFormVisible = true;
        this.forces();
        this.mode = {
          title: "添加",
          url: '/supplier/add',
        }
      }

    },
    submitForm() {
      const config = {
        headers: {"token": localStorage.getItem("token")}
      }
      this.axios.post(this.mode.url, this.form,config).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.initAll();
          this.forMent();
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    forces() {
      this.form = {
        id: "",
        name: "",
        age: "",
        did: "",
        sex: "",
        hobby: "",
        createTime: "",
        status: "",
      };
    },
    forMent() {
      this.dialogFormVisible = false;
      this.form = {
        id: "",
        name: "",
        age: "",
        did: "",
        sex: "",
        hobby: "",
        createTime: "",
        status: "",
      };
    },
    iniData() {
      this.query = {
        supplierName: "",
      };
      this.query.pageNum = 1;
      this.query.pageSize = 3;
      this.initAll();
    },
    handleDelete(id) {
      if (this.user.rid!=1){
        this.$message.error("你没有权限进行操作!")

      }else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const config = {
            headers: {"token": localStorage.getItem("token")}
          }
          this.axios.post(`/supplier/handDelete?id=` + id,null,config).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.message);
              this.initAll();
            } else {
              this.$message.error(res.data.message);

            }

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }

    },
    initAll() {
      const config = {
        headers: {"token": localStorage.getItem("token")}
      }
      this.axios.post(`/supplier/supplierFindPage?pageNum=` + this.query.pageNum + "&pageSize=" + this.query.pageSize,this.query,config).then((res) => {
        console.log(res.data);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
      if (this.tableData.length == 0 && this.query.pageNum > 1) {
        this.query.pageNum--;
        this.initAll();
      }
    },

    handleSizeChange(val) {
      this.query.pageSize = val;
      this.initAll();
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.initAll();
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("user"))
    this.initAll();

  }
}
</script>

<style>

</style>





